<template>
	<div class="connter">

		<template>

			<el-tabs tab-position="right">
				<el-tab-pane label="店铺资料">
					<el-form label-position="left" style="margin-left:50px;" inline class="demo-table-expand" label-width="240px">
						<div>
							<el-form-item label="商户号:">
								<span>{{merchantInfo.merchantCode}}</span>
							</el-form-item>
						</div>
						<div>
							<el-form-item label="账号:">
								<span>{{merchantInfo.loginName}}</span>
							</el-form-item>
						</div>

						<el-form label-position="left" :model="formModel" :rules="rules" ref="ruleForm" class="demo-table-expand" label-width="120px">

							<el-row>
								<el-col>
									<el-form-item label="店铺logo">
										<div style="overflow: hidden;cursor:pointer" @click="clickPicture('logo')" v-loading="uploadTypeChange=='logo'">
											<span><img :src="formModel.merchantIcon" style="width:100px;display: inline-block;height:100px; border-radius: 5px;z-index:999;border: 1px solid #E5E5E5;" alt=""/></span>
										</div>
									</el-form-item>
								</el-col>
								<el-col>
									<div style="margin-top:-99px;color: #fa5555;font-size: 12px;">推荐尺寸100*100</div>

								</el-col>
							</el-row>
							<el-row>
								<el-col>
									<el-form-item label="店铺名" prop="merchantName">
										<el-input type="text" v-model="formModel.merchantName" />
									</el-form-item>
								</el-col>
							</el-row>

							<el-row>
								<el-col>
									<el-form-item label="联系人" prop="contactName">
										<el-input type="text" v-model="formModel.contactName" />
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col>
									<el-form-item label="联系号码" prop="contactMobile">
										<el-input type="text" v-model="formModel.contactMobile" />
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>

								<el-col>
									<el-form-item label="主题颜色" prop="contactMobile">
										<div class="block">

											<el-color-picker v-model="formModel.themeColors"></el-color-picker>
										</div>
									</el-form-item>
								</el-col>
							</el-row>

							<input type="file" ref="logo" style="display:none;" @change="isSizeClear();" />

							<div>
								<el-row :gutter="24" class="row-container">
									<el-col :span="12">
										<div>
											<el-form label-position="left">
												<el-form-item label="搜索附近:">
													<el-row :gutter="24" class="row-container">
														<el-col :span="19">
															<el-input id="keyword" type="textbox" v-model="address" placeholder="请输入地址锁定范围添加坐标"></el-input>
														</el-col>
														<el-col :span="5">
															<el-button type="info" plain="" @click="searchKeyword()">搜索</el-button>
														</el-col>

													</el-row>
												</el-form-item>

											</el-form>
										</div>
										<div id="diycontent"></div>
									</el-col>

								</el-row>
							</div>
						</el-form>
					</el-form>
				</el-tab-pane>
				<!--
        	作者：yang
        	时间：2018-05-23
        	描述：
        -->
				<el-tab-pane label="店铺地址">
					<el-button type="primary" plain @click="showMap(true)">新增店铺</el-button>
					<el-col :span="24" class="toolbar" style="margin-top: 10px;">			
							<el-input 
								v-model="storeName" 
								placeholder="店名" 
								style="width: 200px;"
								clearable 
								@input="getStoreList"
								@keyup.enter.native="getStoreList">
							</el-input>
							<el-button type="primary" @click="getStoreList">搜索</el-button>
					</el-col>
					<el-table :data="storeList" highlight-current-row  ref="multipleTable" style="width: 120%;">
						<el-table-column type="index" label="序号" width="60"></el-table-column>
						<el-table-column prop="name" label="店名" ></el-table-column>
						<el-table-column prop="address" label="地址" ></el-table-column>
						<el-table-column prop="sort" width="350" label="顺序号(值越大，排名越高)"></el-table-column>	
						<el-table-column label="操作" >
							<template scope="scope">
								<el-button size="mini" @click="doEdit(scope.row)" type="info" plain >编辑</el-button>
								<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)" plain >删除</el-button>
							</template>
						</el-table-column>
					</el-table>
					<div class="block" align="right">
						<br>
						<el-pagination 
							:page-size="20"
							:current-page.sync="storePage"
							@current-change="handleCurrentChange" 
							layout=" prev, pager, next" 
							:total="storeCount">
						</el-pagination>
					</div>
				</el-tab-pane>
				<el-tab-pane label="轮播广告">

					<el-form label-position="left" style="margin-left:50px;" inline class="demo-table-expand" label-width="240px">

						<el-row>
							<el-col>
								<el-form-item label="店铺图片">
									
									<div v-loading="loadding">

										
										<el-upload 
											:on-exceed="uploadModel.exceed"
											:action="uploadModel.uploadUrl" 
											list-type="picture-card" 
											:on-preview="uploadModel.onPreview" 
											:limit="4" 
											:on-remove="uploadModel.onRemove" 
											:on-success="uploadModel.onUploadSuccess" 
											:file-list="uploadModel.fileList" 
											:on-progress="uploadModel.progress" 
											:on-error="uploadModel.error" :before-upload="uploadModel.onBefore">
											<i class="el-icon-plus"></i>
										</el-upload>

									</div>
								</el-form-item>
							</el-col>

							<el-col>
								<div style="  margin-top:-150px;  color: #fa5555;    font-size: 12px;">推荐尺寸375*240</div>
							</el-col>
						</el-row>

						<el-row>
							<el-col>
								<el-form-item label="分类页广告">
									<!-- <div style="width:375px;height:220px;    overflow: hidden;cursor:pointer" @click="clickPicture('class')" v-loading="uploadTypeChange=='class'"> -->
									<!-- <span><img :src="formModel.classifyBanner" style="width:100%" alt=""></span> -->
									<div v-loading="loadding1">
										<el-upload :action="uploadModel.uploadUrl" list-type="picture-card" :on-preview="uploadModel1.onPreview" :limit="4" :on-remove="uploadModel1.onRemove" :on-success="uploadModel1.onUploadSuccess" :file-list="uploadModel1.fileList" :on-progress="uploadModel1.progress" :on-error="uploadModel1.error" :before-upload="uploadModel1.onBefore">
											<i class="el-icon-plus"></i>
										</el-upload>

									</div>
								</el-form-item>
							</el-col>
							<el-col>
								<div style="  margin-top:-150px;    color: #fa5555;    font-size: 12px;">推荐尺寸375*220</div>
							</el-col>
						</el-row>
					</el-form>

				</el-tab-pane>
				<el-tab-pane label="信息推送">

					<el-form label-position="left" style="margin-left:50px;" inline class="demo-table-expand" label-width="240px">

						<!-- <h3 style="color:#666">提示编辑</h3> -->

						<!-- <el-input  placeholder="请输入标题" v-model="statement.statementTitle" :maxlength="12" style="width:240px;margin-bottom:20px;margin-right:20px"/>  -->
						<el-switch v-model="statement.status" active-color="#13ce66" active-text="开启显示" inactive-color="#ff4949" style="margin:10px;">
						</el-switch>
						<el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="statement.statementContent" :maxlength="500">
						</el-input>

						<!-- <p style="float:right;color:#666" v-if="statement.updateTime">更新时间：{{statement.updateTime}}</p> -->

					</el-form>

				</el-tab-pane>

				<el-tab-pane label="OEM查询" v-if="$store.getters.getModel.componentSearch === 'true'">

					<h3 style="color:#666">热门标签</h3>

					<el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false" @close="handleClose(tag)">
						{{tag.word}}
					</el-tag>

					<el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
					</el-input>
					<el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加</el-button>
				</el-tab-pane>
			</el-tabs>
		</template>
		<el-dialog title="添加定位" :visible.sync="localModel" style="padding:20px 100px;" width="700px" center top="10vh" :close-on-click-modal='false'>
			<div>
			</div>
		</el-dialog>
		<el-dialog :visible.sync="imageDialogModel.show">
			<img width="100%" :src="imageDialogModel.imageUrl" alt="">
		</el-dialog>

		<div style="height:70px;"></div>
		<div style=" 
 padding:0 300px;   position: fixed;
    bottom: 0;
    background-color: #fff;
    width: 100%;
    height: 50px;
    display: flex;z-index:999;
    align-items: center;">
			<el-button type="primary" plain="" @click="submitForm('ruleForm')"> 保存 </el-button>

		</div>
		</el-form>

		<div>
			<el-form-item label="详细地址:">
				<span>{{(merchantInfo.address||'')}}</span>
			</el-form-item>
		</div>
		<!--
    	作者：yang
    	时间：2018-05-23
    	描述：添加地址弹窗
    -->
    <map-layer v-if="showMapLayer"  :show-name="showName" :store-info="storeInfo" @closeStore="showMap" @closeStoreBox="closeStoreBox"></map-layer>
	</div>
</template>

<script>
	var map = [];
	import * as Api from "@/api/Api.js";
	import * as RoundApi from "@/api/RoundApi.js";
	import * as Config from "@/api/Config.js";
	import mapLayer from './components/mapLayer.vue'
	export default {
		data() {
			var merchantName1 = (rule, value, callback) => {
				if(
					(this.formModel.merchantName || "") === "" ||
					this.formModel.merchantName.length < 4
				) {
					callback(new Error("请填写4位以上店铺名"));
				}
				callback();
			};
			var contactName1 = (rule, value, callback) => {
				if(
					(this.formModel.contactName || "") === "" ||
					this.formModel.contactName.length < 2
				) {
					callback(new Error("请填写联系人"));
				}
				callback();
			};

			var contactMobile1 = (rule, value, callback) => {

				if(this.formModel.contactMobile.length < 11 ) {
					callback(new Error("请填写正确的联系号码"));
				}
				callback();
			};

			return {
				showName:false,
				showMapLayer: false,
				storeName: '', // 店铺名称
				storePage: 0 ,
				storeCount:1,
				goodsData:[{
					line:'1',
					goodsName:'全得是',
					address:'广州',
					num:'1'
				}],
				storeList: null,	// 店铺列表
				dynamicTags: ["标签一", "标签二", "标签三"],

				inputVisible: false,
				inputValue: "",
				statement: {
					statementTitle: "",
					statementContent: "",
					status: false
				},

				tabPosition: "top",
				imageDialogModel: {
					show: false,
					imageUrl: ""
				},
				loadding: false,
				loadding1: false,
				uploadModel1: {
					disabled: false,
					uploadUrl: "",
					fileList: [],
					onRemove: (file, fileList) => {
						if(this.loadding1) {
							this.loadding1 = false;
							return;
						}
						this.uploadModel1.fileList = fileList;
					},
					onBefore: () => {
						if(this.loadding1) {
							return false;
						}
					},
					onPreview: file => {
						this.imageDialogModel.imageUrl = file.url;
						this.imageDialogModel.show = true;
					},
					onUploadSuccess: (response, file, fileList) => {
						console.log(response.data.filename);
						let dt = {
							name: "1.png",
							url: response.data.filename
						};

						window.myvue.uploadModel1.fileList.push(dt);
						this.loadding1 = false;
					},
					error: () => {
						this.loadding1 = false;
					},
					progress: () => {
						this.loadding1 = true;
					},
					doPreview: () => {}
				},
				uploadModel: {
					disabled: false,
					uploadUrl: "",
					fileList: [],
					exceed:() => {
						this.$message({
							type: "info",
							message: "最多只能上传四张"
						});
					},
					onRemove: (file, fileList) => {
						if(this.loadding) {
							this.loadding = false;
							return;
						}
						this.uploadModel.fileList = fileList;
					},
					onBefore: () => {
						if(this.loadding) {
							return false;
						}
					},
					onPreview: file => {
						this.imageDialogModel.imageUrl = file.url;
						this.imageDialogModel.show = true;
					},
					onUploadSuccess: (response, file, fileList) => {
						console.log("上传成功");
						let dt = {
							name: "1.png",
							url: response.data.filename
						};

						window.myvue.uploadModel.fileList.push(dt);
						this.loadding = false;
					},
					error: () => {
						this.loadding = false;
					},
					progress: () => {
						this.loadding = true;
					},
					doPreview: () => {}
				},
				uploadType: "",

				uploadTypeChange: "",
				formModel: {},
				changeInfo: {
					changeInfo: () => {
						this.changeInfo.infoModel = !this.changeInfo.infoModel;
					},
					infoModel: false
				},
				merchantModel: {
					token: this.$store.getters.getToken,
					merchantId: this.$store.getters.getMerchantId
				},
				merchantInfo: [],
				localModel: false,
				pictureModel: false,
				isEdit: false,
				searchService: [], //具名搜索实例
				geocoder: [], //坐标反查地址实例
				markers: [], //所有标记
				longitude: "22.940056675211114", //经度
				latitude: "113.6923599243164", //纬度
				address: "",

				addForm: {
					longitude: "",
					latitude: ""
				},
				map: [],
				rules: {
					merchantName: [{
						validator: merchantName1,
						trigger: "blur"
					}],
					contactName: [{
						validator: contactName1,
						trigger: "blur"
					}],
					contactMobile: [{
						validator: contactMobile1,
						trigger: "blur"
					}]
				},
				storeInfo:{}
					
				
			};
		},
		
		methods: {
			doEdit(item){
				this.storeInfo = item
				this.showName = true
				this.showMapLayer = true
			},
			closeStoreBox(){
				this.showMapLayer = false
			},
			handleCurrentChange(val) {
				console.log(val);
				this.storePage = val;
				this.getStoreList();
			},
			showMap(val = false){
				this.showName = false
				if(val){
					this.storeInfo = {}
				}
				this.showMapLayer = !this.showMapLayer
				if(!this.showMapLayer){
//					this.storePage  = 0
//					this.storeCount = 1
					this.getStoreList();
				}
			},
			handleDelete(index, item){
				console.log(index)
				console.log(item)
				this.$confirm("确定删除此门店地址?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				})
				.then(() => {
					
					let model = {
						shopId: item.id
					};
					Api.deleteStore(this, model).then(res => {
						if(res.retCode) {
							this.getStoreList();
							this.$message({
								type: "info",
								message: "删除成功"
							});
						}
					});
				})
				.catch(() => {
					this.$message({
						type: "info",
						message: "已取消删除"
					});
				});
				
			},
			handleClose(tag) {
				let self = this;
				let model = {
					id: tag.id
				};
				RoundApi.delHotword(this, model).then(res => {
					if(res.retCode) {
						this.$message("已删除");
						this.getHotword();
					}
				});
			},

			showInput() {
				this.inputVisible = true;
				this.$nextTick(_ => {
					this.$refs.saveTagInput.$refs.input.focus();
				});
			},

			addHotword() {
				let self = this;
				let model = {
					word: this.inputValue
				};
				RoundApi.addHotword(this, model).then(res => {
					if(res.retCode) {
						this.$message("添加成功");
						this.getHotword();
					}
				});
			},
			getHotword() {
				let self = this;
				let model = {
					word: this.inputValue
				};
				RoundApi.getHotword(this).then(res => {
					if(res.retCode) {
						this.dynamicTags = res.data;
					}
				});
			},
			handleInputConfirm() {
				let inputValue = this.inputValue;
				if(inputValue) {
					this.dynamicTags.push(inputValue);
					console.log("新增一条热词:", this.inputValue);
					this.addHotword();
				}

				this.inputVisible = false;
				this.inputValue = "";
			},
			submitForm(formName) {
				this.$refs[formName].validate(valid => {
					if(valid) {
						this.onsubmit();
					} else {
						console.log("error submit!!");
						return false;
					}
				});
			},

			clickPicture(uploadType) {
				console.log(this.uploadTypeChange);
				if(this.uploadTypeChange !== "") {
					return;
				}
				this.uploadType = uploadType;
				this.$refs.logo.click();
			},
			isSizeClear() {
				if(!this.$refs.logo.files[0]) {
					return;
				}

				this.uploadTypeChange = this.uploadType;
				let form = new FormData();
				let logo = this.$refs.logo.files[0];
				form.append("file", logo);

				RoundApi.upLoadPicture(form).then(res => {
					console.log("上传", res);

					if(res.retCode) {
						switch(this.uploadType) {
							case "banner":
								this.formModel.mainBanner = res.data.filename;
								break;

							case "class":
								this.formModel.classifyBanner = res.data.filename;
								break;

							case "logo":
								this.formModel.merchantIcon = res.data.filename;
								break;
						}
						this.uploadType = "";
						this.uploadTypeChange = "";
					}
				});
			},
			onsubmit() {
				if(!this.uploadModel.fileList.length > 0 ||
					!this.uploadModel1.fileList.length > 0
				) {
					this.$message("轮播图至少上传一张图片");
					return;
				}

				Object.assign(this.formModel, this.merchantModel);

				if((this.addForm.latitude != "", this.addForm.latitude != "")) {
					Object.assign(this.formModel, this.addForm);
				}

				let fileList = [];
				for(let i in this.uploadModel.fileList) {
					fileList.push(this.uploadModel.fileList[i].url);
				}
				this.formModel.mainBanner = fileList.join(",");

				let fileList1 = [];
				for(let i in this.uploadModel1.fileList) {
					fileList1.push(this.uploadModel1.fileList[i].url);
				}
				this.formModel.classifyBanner = fileList1.join(",");
				// this.formModel.classifyBanner = this.uploadModel1.fileList.join(",");
				RoundApi.updateMerchantInfo(this, this.formModel).then(res => {
					console.log(res);
					if(res.retCode) {
						this.$message("保存成功");
						let storage = window.sessionStorage;
						storage.setItem("merchantIcon", this.formModel.merchantIcon);
						storage.setItem("merchantName", this.formModel.merchantName);
						this.$store.commit("SETICON", this.formModel.merchantIcon);
						this.$store.commit("SETMERCHANTNAME", this.formModel.merchantName);
						this.getMerchantInfo();
					} else {
						this.$alert("保存失败");
					}
					this.changeInfo.infoModel = false;
				});
				if(!this.statement.id) {
					this.addStatement();
				} else {
					//更新
					this.updateStatement();
					console.log("更新");
				}
			},

			editPicture() {
				this.pictureModel = !this.pictureModel;
			},
			editLocal() {
				this.localModel = !this.localModel;
				setTimeout(() => this.initEditLocal(), 500);
			},
			searchKeyword() {
				var keyword = this.address;
				console.log(this.markers)
				this.clearOverlays(this.markers);
				//根据输入的城市设置搜索范围
				// searchService.setLocation("北京");
				//根据输入的关键字在搜索范围内检索
				this.searchService.search(keyword);
				
			},

			initEditLocal() {
				let self = this;
				var center = new qq.maps.LatLng(39.916527,116.397128);
			    map = new qq.maps.Map(document.getElementById('diycontent'),{
			        center: center,
			        zoom: 20
			    });
			    self.geocoder = new qq.maps.Geocoder({
					complete: function(result) {
						console.log(result);
						// map1.setCenter(result.detail.location);
						var marker = new qq.maps.Marker({
							position: result.detail.location,
							map: map
						});
						var info = new qq.maps.InfoWindow({
							map: map
						});
						//获取标记的点击事件
						info.open();
						info.setContent(
							'<div style="text-align:center;white-space:nowrap;margin:10px;">' +
							result.detail.address +
							"</div>"
						);

						// self.address = result.detail.address;

						info.setPosition(result.detail.location);
						self.markers.push(marker);
						self.markers.push(info);
					}
				});
			    var latlngBounds = new qq.maps.LatLngBounds();
			    //调用Poi检索类
			    this.searchService = new qq.maps.SearchService({
			        complete : function(results){
			          	console.log(results)
			          	if(!results.detail.pois){
			          		self.$message({
			          			type: 'error',
			          			message: '没有搜索到相关地址'
			          		})
			          		return
			          		
			          	}
			            var pois = results.detail.pois;
			            for(var i = 0,l = 1;i < l; i++){
			                var poi = pois[i];
			                latlngBounds.extend(poi.latLng);  
			                var marker = new qq.maps.Marker({
			                    map:map,
			                    position: poi.latLng
			                });
			                
			                console.log(poi)
							var info = new qq.maps.InfoWindow({
								map: map
							});
							//获取标记的点击事件
							info.open();
							info.setContent(
								'<div style="text-align:center;white-space:nowrap;margin:10px;">' +
								poi.name +
								"</div>"
							);

							// self.address = poi.name;
							self.addForm.latitude = poi.latLng.lat;
							self.addForm.longitude = poi.latLng.lng;
							console.log(self.addForm.latitude )
							info.setPosition(poi.latLng);
			
			                marker.setTitle(i+1);
			
			                self.markers.push(marker);
			            }
			            map.fitBounds(latlngBounds);
			        }
			    });
//			    qq.maps.event.addListener(map, "click", function(event) {
//					console.log(event)
//					self.addForm.latitude = event.latLng.getLat();
//					self.addForm.longitude = event.latLng.getLng();
//					console.log(self.addForm)
//					self.clearOverlays(self.markers);
//					var marker = new qq.maps.Marker({
//						position: new qq.maps.LatLng(
//							event.latLng.getLat(),
//							event.latLng.getLng()
//						),
//						map: map
//					});
//
//					var info = new qq.maps.InfoWindow({
//						map: map
//					});
//					//获取标记的点击事件
//					info.open();
//					info.setContent(
//						'<div style="text-align:center;white-space:nowrap;margin:10px;">' +
//						"地址信息" +
//						"</div>"
//					);
//
//					info.setPosition(event.latLng);
//					self.markers.push(marker);
//					self.markers.push(info);
//				});
//			    console.log(self.markers)
			},
			clearOverlays(overlays) {
				var overlay;
			    while(overlay = overlays.pop()){
			        overlay.setMap(null);
			    }
			},
		

			init() {
				let self = this;
				RoundApi.getMerchantInfo(this).then(res => {
					if(res.retCode) {
						console.log("商户信息", res);
						this.merchantInfo = res.data;
						this.formModel = res.data;
						this.longitude = res.data.longitude;
						this.latitude = res.data.latitude;
						this.uploadModel.fileList = [];
						this.uploadModel1.fileList = [];

						let fileList = this.formModel.mainBanner.split(",");
						for(let i in fileList) {
							var dt = {
								name: "1.png",
								url: fileList[i]
							};
							this.uploadModel.fileList.push(dt);
						}

						let fileList1 = this.formModel.classifyBanner.split(",");
						for(let i in fileList1) {
							var dt = {
								name: "1.png",
								url: fileList1[i]
							};
							this.uploadModel1.fileList.push(dt);
						}
						let merchantModel = {};
						Object.assign(merchantModel, this.merchantInfo);
						this.formModel = merchantModel;
						setTimeout(() => this.initEditLocal(), 500);
					}
				});
			},
			getMerchantInfo() {
				this.init();
			},
			addStatement() {
				let self = this;
				let model = {
					title: this.statement.statementTitle,
					content: this.statement.statementContent,
					status: this.statement.status
				};
				RoundApi.addStatement(this, model).then(res => {
					if(res.retCode) {
						this.getStatement();
					}
				});
			},
			updateStatement() {
				let self = this;
				let model = {
					id: this.statement.id,
					title: this.statement.statementTitle,
					content: this.statement.statementContent,
					status: this.statement.status
				};
				RoundApi.updateStatement(this, model).then(res => {
					if(res.retCode) {
						this.getStatement();
					}
				});
			},
			getStatement() {
				let self = this;
				RoundApi.getStatement(this).then(res => {
					if(res.retCode) {
						console.log("查询使用声明", res);
						if(res.data.id) {
							this.statement = res.data;
							Object.assign(this.statement, res.data);
							this.statement.statementContent = this.statement.content;
							this.statement.statementTitle = this.statement.title;
						}
					}
				});
			},
			getStoreList() {

				let params = {
					page: this.storePage -1,
					pageSize: 20,
					keyword: this.storeName
				}
				Api.getStoreList(this, params).then(res => {
					console.log(res)
					if(res.retCode) {
						this.storeList = res.data.shopList
						
						this.storeCount = res.data.page.total;
					}
				});
			}
		},
		mounted() {
			window.myvue = this;
			this.uploadModel.uploadUrl = Config.g_upload_url;
			window.onload = this.init();
			//获取使用声明
			this.getStatement();
			this.getHotword();
			// 获取店铺列表
			this.getStoreList()
		},
		components: {
			mapLayer
		}
	};
</script>
<style>
	.el-main {
		overflow: visible;
	}
</style>

<style scoped>
	#container {
		width: 405px;
		height: 260px;
	}
	
	#diycontent {
		width: 603px;
		height: 300px;
	}
	
	.el-tag+.el-tag {
		margin-left: 10px;
		margin-bottom: 10px;
	}
	
	.button-new-tag {
		margin-left: 10px;
		height: 32px;
		padding-top: 0;
		padding-bottom: 0;
	}
	
	.input-new-tag {
		margin-bottom: 10px;
		width: 90px;
		margin-left: 10px;
		vertical-align: bottom;
	}
</style>